<template>
<div class="home">
    <div class="labels">
        <p>第{{ level }}关</p>
        <p>倒计时: {{ time }}s</p>
    </div>
    <img class="tu" :src="nowimg" alt="">
    <div class="answer">
        <p>{{ myAnswer.split('')[0] || '' }}</p>
        <p>{{ myAnswer.split('')[1] || '' }}</p>
        <p>{{ myAnswer.split('')[2] || '' }}</p>
        <p>{{ myAnswer.split('')[3] || '' }}</p>
        <img v-if="isRight" class="right" src="~@/assets/right.png" alt="">
        <img v-if="isError" class="error" src="~@/assets/error.png" alt="">
    </div>
    <div class="words">
        <p v-for="item in zis" :key="item" @click="clickWord(item)">{{ item }}</p>
    </div>
    <div class="tishi">{{ explain }}</div>

    <div class="dialog" v-show="showDialog">
        <div class="card">
            <p class="user">{{ user?.uacc || '' }}</p>
            <p class="score">
                <span>历史最高成绩: </span>
                <span class="maxScore">{{ user.score }}</span>
            </p>
            <div class="btn" @click="beginGame">开始</div>
            <p class="phb" @click="goToPhb">排行榜</p>
        </div>
    </div>

    <div class="dialog" v-show="showEndDialog">
        <div class="card">
            <p class="user">GAME OVER</p>
            <p class="score">
                <span>本局成绩: </span>
                <span class="maxScore">{{ level-1 }}</span>
            </p>
            <p class="score">
                <span>历史最高成绩: </span>
                <span class="maxScore">{{ user.score }}</span>
            </p>
            <div class="btn" @click="reBeginGame">再来一局</div>
            <p class="phb" @click="goToPhb">排行榜</p>
        </div>
    </div>
</div>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'
import {saveScore} from '@/api/index';

const { setTitle, setShowLeft } = inject("nav");

import cys from './data.js'

const router = useRouter()

import img1 from '../assets/cy/1.jpg'
import img2 from '../assets/cy/2.jpg'
import img3 from '../assets/cy/3.jpg'
import img4 from '../assets/cy/4.jpg'
import img5 from '../assets/cy/5.jpg'
import img6 from '../assets/cy/6.jpg'
import img7 from '../assets/cy/7.png'
import img8 from '../assets/cy/8.jpg'

const user = ref(JSON.parse(localStorage.getItem('user')));

const goToPhb = () => {
    router.push({ path: '/phb' });
}

const rand = (min: number, max: number) => {
    return Math.floor(Math.random() * (max - min)) + min;
}

const index = ref(rand(0, 8));
const myAnswer = ref('');
const answer = computed(() => {
    return cys[index.value].answer;
})
const zis = computed(() => {
    return cys[index.value].words.sort((a: string, b: string) => {
        return Math.random() - 0.5;
    })
})
const explain = computed(() => {
    return cys[index.value].explain;
})
const nowimg = computed(() => {
    return [img1, img2, img3, img4, img5, img6, img7, img8][index.value];
})

const isRight = ref(false);
const isError = ref(false);

const clickWord = (word: string) => {
    myAnswer.value += word
    if (myAnswer.value.length === 4) {
        if (myAnswer.value === answer.value) {
            isRight.value = true;
            setTimeout(() => {
                isRight.value = false;
                myAnswer.value = '';
                level.value++;
                index.value = rand(0, 8);
            }, 500)
        } else {
            isError.value = true;
            setTimeout(() => {
                myAnswer.value = '';
                isError.value = false;
            }, 500)
        }
    }
}

const time = ref(60);
let timer = null;
const level = ref(1);
const showDialog = ref(true);
const showEndDialog = ref(false);

const beginGame = () => {
    showDialog.value = false;
    clearInterval(timer)
    timer = setInterval(() => {
        time.value--;
        if (time.value === 0) {
            nextTick(async () => {
                clearInterval(timer)
                showEndDialog.value = true;
                if (level.value-1 > user.value.score) {
                    user.value.score = level.value - 1;
                }
                saveScore({
                    uid: user.value.id,
                    score: level.value - 1
                }).then(res => {
                    if (res.data.data.score > user.value.score) {
                        user.value.score = res.data.data.score;
                    }
                    localStorage.setItem('user', JSON.stringify(user.value));
                })
            })
        }
    }, 1000)
}

const reBeginGame = () => {
    showEndDialog.value = false;
    time.value = 60;
    level.value = 1;
    index.value = rand(0, 8);
    beginGame();
}

onMounted(() => {
    setTitle('成语接龙') 
    setShowLeft(false)
    if (!localStorage.getItem('user')) {
        router.push({ path: '/login' });
    }
})

</script>

<style lang="less" scoped>
@keyframes show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.home {
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 2vw;
    overflow: hidden;
    position: relative;

    .labels {
        display: flex;
        justify-content: space-between;
        margin-top: 3vh;
    }

    .tu {
        border: 1px solid #12d2ec;;
        height: 30vh;
        margin-top: 3vh;
        object-fit: contain;
        padding: 1vw;
        border-radius: 4px;
    }
    .answer {
        width: 80vw;
        height: 5vh;
        margin: 3vh auto 0;
        display: flex;
        justify-content: space-around;
        position: relative;

        p {
            width: 12vw;
            height: 12vw;
            box-sizing: border-box;
            border: 1px solid #12d2ec;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2vh;
            font-weight: 700;
            color: #12d2ec;
            border-radius: 4px;
        }

        img {
            width: 12vw;
            height: 12vw;
            position: absolute;
            right: -8vw;
            top: 0;
        }
        .right {
            animation: show .3s;
        }
        .error {
            animation: show .3s;
        }
    }
    .words {
        height: 0;
        flex-grow: 1;
        width: 80vw;
        margin: 3vh auto 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: flex-start;
        p {
            width: 12vw;
            height: 12vw;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2vh;
            font-weight: 700;
            background-color: #12d2ec;
            color: #fff;
            border-radius: 4px;
            margin-bottom: 2vh;
        }
    }
    .tishi {
        background-color: #12d2ec;
        padding: 5vw;
        color: #fff;
        text-align: left;
    }

    .dialog {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .card {
            background-color: #fff;
            width: 80vw;
            border-radius: 12px;
            padding: 5vh 0;

            .user {
                font-size: 18px;
                color: #333;
                font-weight: 500;
                margin-bottom: 2vh;
            }
            .score {
                .maxScore {
                    font-size: 20px;
                    font-weight: 700;
                    color: #12d2ec;
                }
            }
            .btn {
                width: 80%;
                height: 5vh;
                background-color: #12d2ec;
                margin: 3vh auto;
                color: #fff;
                line-height: 5vh;
                border-radius: 4px;
            }
            .phb {
                color: #333;
                text-decoration: underline;

            }
        }
    }
}
</style>